<template lang="html">
  <div class="swipe" ref="swipe" v-if="data.length > 0">
    <div
    :class="_class(index)"
    :style="_style(index)"
    v-for="(item, index) in data" :key="index"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
    @click="clickHandler(index)"
    >
      <img :src="item">
    </div>
    <div class="bar" v-if="data.length > 1 && showCircular">
      <div
      :class="{'bar-item': true, 'bar-active': active === item - 1}"
      v-for="item in data.length"
      :key="item"
      @click="checkout(item - 1)"
      >
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'vue-simple-mobile-swipe',
  props: {
    auto: {
      default: true
    },
    time: {
      type: Number,
      default: 3000
    },
    data: {
      type: Array,
      default: function () {
        return []
      }
    },
    showCircular: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      state: true,
      active: 0,
      img: { x: 0, y: 0, startX: 0, startY: 0 },
      loop: null,
      translateX: 0,
      w_w: 375
    }
  },
  computed: {
    before () {
      let i = 0
      if (this.active === 0) {
        i = this.data.length - 1
      } else {
        i = this.active - 1
      }
      return i
    },
    after () {
      let i = 0
      if (this.active === this.data.length - 1) {
        i = 0
      } else {
        i = this.active + 1
      }
      return i
    }
  },
  methods: {
    _style (index) {
      let x = 0
      if (index === this.active) {
        x = this.w_w + this.translateX
      } else if (index === this.after) {
        x = this.translateX
      } else if (index === this.before) {
        x = 2 * this.w_w + this.translateX
      }
      return {
        transform: `translateX(-${x}px)`
      }
    },
    _class (index) {
      return {
        'swipe-item': true,
        'swipe-item-active': index === this.active,
        'swipe-item-before': index === this.before,
        'swipe-item-after': index === this.after,
        'swipe-transition': this.state
      }
    },
    clickHandler (index) {
      this.$emit('clickHandler', index)
    },
    checkout (index) {
      if (this.active !== index) {
        this.state = false
        this.active = index
        this.interval()
      }
    },
    touchstart (e) {
      clearInterval(this.loop)
      let even = e.changedTouches ? e.changedTouches[0] : e
      this.img.startX = even.pageX
      this.img.startY = even.pageY
      this.img.x = even.pageX
      this.img.y = even.pageY
      this.state = false
    },
    touchmove (e) {
      let even = e.changedTouches ? e.changedTouches[0] : e
      let xX = this.img.startX - even.pageX
      if (Math.abs(xX) > Math.abs(this.img.startY - even.pageY)) {
        let absX = Math.abs(this.translateX)
        let a = ((this.w_w - absX) / (this.w_w * 10)) * (Math.abs(xX) > this.w_w ? 0.5 * this.w_w : Math.abs(xX))
        absX = absX + Number(a.toFixed(4))
        let iden = xX < 0
        this.translateX = iden ? -absX : absX
      }
      this.img.x = even.pageX
      this.img.y = even.pageY
    },
    touchend (e) {
      let img = this.img
      if (Math.abs(img.startX - img.x) > Math.abs(img.startY - img.y)) {
        if (img.startX - img.x > 150) {
          this.active = this.active === this.data.length - 1 ? 0 : this.active + 1
        } else if (img.startX - img.x <= -150) {
          this.active = this.active === 0 ? this.data.length - 1 : this.active - 1
        }
      }
      this.state = true
      this.img = { x: 0, y: 0, startX: 0, startY: 0 }
      this.$nextTick(() => {
        this.translateX = 0
        this.interval()
      })
    },
    interval () {
      if (this.auto) {
        clearInterval(this.loop)
        this.loop = setInterval(() => {
          this.state = true
          this.active = this.active === this.data.length - 1 ? 0 : this.active + 1
        }, this.time > 1000 ? this.time : 1000)
      }
    }
  },
  created () {
  },
  mounted () {
    if (this.data.length > 0) {
      this.w_w = this.$refs.swipe.clientWidth
      this.interval()
    }
  }
}
</script>

<style lang="scss" scoped>
.swipe {
  width: 100%;
  height: 100%;
  background-color: gray;
  overflow: hidden;
  position: relative;
  .swipe-item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    img {
      width: 100%;
    }
  }
  .swipe-transition {
    transition: transform 0.3s;
  }
  .swipe-item-active {
    z-index: 99;
  }
  .swipe-item-before {
    z-index: 97;
  }
  .swipe-item-after {
    z-index: 98;
  }
  .bar {
    position: absolute;
    width: 100px;
    height: 20px;
    bottom: 10px;
    left: 50%;
    margin-left: -50px;
    z-index: 100;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .bar-item {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
  .bar-active {
    background-color: rgba(255, 255, 255, 0.8);
  }
}
</style>
